<template>
  <div class="bar">
    <div class="right">
      <t-button theme="primary" @click="form.open({})">
        <template #icon><t-icon name="add" /></template>
        {{ $t('common.create') }}
      </t-button>
    </div>
    <div class="title">{{ plugin.t('name') }}</div>
  </div>
  <div class="box">
    <Classify />
    <div class="box bg-box">
      <t-button shape="square" variant="outline" @click="clientStore.get" style="float: right">
        <template #icon>
          <t-icon name="refresh" />
        </template>
      </t-button>
      <t-form layout="inline" style="margin-bottom: 20px">
        <t-form-item label-width="0">
          <t-select v-model="clientStore.where.key" style="width: 200px; margin-right: 10px">
            <t-option value="name" :label="plugin.t('form.name')" />
            <t-option value="code" :label="plugin.t('form.code')" />
            <t-option value="phone" :label="plugin.t('form.phone')" />
            <t-option value="email" :label="plugin.t('form.email')" />
          </t-select>
          <t-input v-model="clientStore.where.value">
            <template #prefix-icon>
              <t-icon name="search" />
            </template>
          </t-input>
        </t-form-item>
        <t-form-item label-width="0">
          <t-button theme="default" @click="clientStore.reset(1)">{{ $t('common.search') }}</t-button>
        </t-form-item>
      </t-form>
      <Table @update="data => form.open(data)" @point="data => point.open(data)" @delete="onDelete" />
      <Form ref="form" />
      <Point ref="point" />
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../index'
  import clientStore from '../store'
  import Classify from './classify/index.vue'
  import Table from './table.vue'
  import Form from './form.vue'
  import Point from './point.vue'

  const plugin = index.plugin
  const form = ref(null)
  const point = ref(null)

  // 删除
  const onDelete = data => {
    app.confirm({
      theme: 'warning',
      header: app.lang.t('common.warning'),
      body: app.lang.t('message.confirm.delete' , { name: data.name }),
      confirmBtn: {
        theme: 'warning',
        content: app.lang.t('common.delete'),
      }
    }, hide => {
      clientStore.del(data.id).then(res => {
        app.message('success', 'message.' +  res.message)
        hide()
      }).catch(res => {
        app.message('error', 'message.error.' + res.message)
      })
    })
  }
</script>